<template>
  <div class="container" v-loading="isLoading">
    <el-card>

      <el-table :data="tableData" border>
        <el-table-column prop="report_content" label="标题" show-overflow-tooltip />
        <el-table-column prop="user_real_name" label="姓名" />
        <el-table-column prop="user_phone" label="用户电话" />
        <el-table-column prop="repair_addr" label="报修地址" />
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="{ row }">
            <span :class="statusClass[row.status]">{{
              statusObj[row.status]
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="180"
          align="center"
        />
        <el-table-column label="操作" width="180px" align="center">
          <template slot-scope="{ row }">
            <!-- <el-button v-if="row.status==0"
              type="text"
              @click="giveOrder(row.id)"
              >分发</el-button
            > -->
            <el-button v-if="row.status==1"
              type="text"
              class="red"
              @click="solve(row.id)"
              >处理</el-button
            >
            <el-button v-if="row.status==2||row.status==3"
              type="text"
              @click="openEditDialog(row.id)"
              >查看详情</el-button
            >
            <el-button
              class="red"
              type="text"
              @click="deleteOrder(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.per_page"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      title="查看详情"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="实名信息" prop="user_real_name">
          <el-input readonly
            v-model="builingForm.user_real_name"
            placeholder="实名信息"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="手机号" prop="user_phone">
          <el-input readonly
            v-model="builingForm.user_phone"
            placeholder="手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="用户住址" prop="user_addr_info">
          <el-input readonly
            :value="builingForm.user_addr_info"
            placeholder="用户住址"
          ></el-input>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item class="span-2" label="工单创建时间" prop="create_time">
          <el-input readonly
            v-model="builingForm.create_time"
            placeholder="创建时间"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="报修地址" prop="report_addr">
          <el-input readonly
            :value="builingForm.report_addr"
            placeholder="报修地址"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="工单状态" prop="status">
          <el-input readonly
            v-model="statusText[builingForm.status]"
            placeholder="工单状态"
          ></el-input>
        </el-form-item>

         <el-form-item label="报修内容" prop="report_content">
          <el-input readonly
            v-model="builingForm.report_content"
            type="textarea"
            row="6"
            placeholder="报修内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" v-if="builingForm.report_imgs.length" prop="report_imgs">
           <el-image v-for="(item,index) in builingForm.report_imgs" v-bind:key="index"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="builingForm.report_imgs">
          </el-image>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="工单状态" prop="status">
          <el-select v-model="builingForm.status" disabled  placeholder="请选择状态">
            <el-option
              v-for="(oVal, oIdx) of status"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="处理人">
          <div class="adminUserInfo">
            <el-avatar class="adminAvator" :src="builingForm.admin_user_avatar_url" />
            <div class="blue">{{ builingForm.admin_user_name }}</div>
          </div>
        </el-form-item>
        <el-form-item label="处理图片" v-if="builingForm.repair_imgs.length" prop="repair_imgs">
           <el-image v-for="(item,index) in builingForm.repair_imgs" v-bind:key="index"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="builingForm.repair_imgs">
          </el-image>
        </el-form-item>
        <el-form-item label="处理内容" prop="remarks">
          <el-input readonly
            v-model="builingForm.repair_content"
            type="textarea"
            row="6"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="closeDialog()"
          >关闭</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="处理工单"
      :visible.sync="showAddOrSovle"
      width="1200px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="7em"
      >
        <el-form-item prop="$id" hidden />
        <el-form-item class="span-2" label="实名信息" prop="user_real_name">
          <el-input readonly
            v-model="builingForm.user_real_name"
            placeholder="实名信息"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="手机号" prop="user_phone">
          <el-input readonly
            v-model="builingForm.user_phone"
            placeholder="手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="用户住址" prop="user_addr_info">
          <el-input readonly
            :value="builingForm.user_addr_info"
            placeholder="用户住址"
          ></el-input>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item class="span-2" label="创建时间" prop="create_time">
          <el-input readonly
            v-model="builingForm.create_time"
            placeholder="创建时间"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="报修地址" prop="report_addr">
          <el-input readonly
            :value="builingForm.report_addr?builingForm.report_addr:'暂无'"
            placeholder="报修地址"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="工单状态" prop="status">
          <el-input readonly
            v-model="statusText[builingForm.status]"
            placeholder="工单状态"
          ></el-input>
        </el-form-item>

         <el-form-item label="报修内容" prop="report_content">
          <el-input readonly
            v-model="builingForm.report_content"
            type="textarea"
            row="6"
            placeholder="报修内容"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" v-if="builingForm.report_imgs.length" prop="report_imgs">
           <el-image v-for="(item,index) in builingForm.report_imgs" v-bind:key="index"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="builingForm.report_imgs">
          </el-image>
        </el-form-item>

        <el-divider></el-divider>

        <el-form-item label="工单状态" prop="status">
          <el-select v-model="builingForm.status"  placeholder="请选择状态">
            <el-option
              v-for="(oVal, oIdx) of status"
              :key="oIdx"
              v-bind="oVal"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="处理人" v-if="builingForm.status!=0">
          <div class="adminUserInfo">
            <el-avatar class="adminAvator" :src="builingForm.admin_user_avatar_url" />
            <div class="blue">{{ builingForm.admin_user_name }}</div>
          </div>
        </el-form-item>
        <el-form-item label="处理图片" v-if="builingForm.repair_imgs.length" prop="repair_imgs">
           <el-image v-for="(item,index) in builingForm.repair_imgs" v-bind:key="index"
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="builingForm.repair_imgs">
          </el-image>
        </el-form-item>
        <el-form-item label="处理内容" prop="remarks">
          <el-input
            v-model="builingForm.repair_content"
            type="textarea"
            row="6"
            placeholder="请输入回复内容"
          ></el-input>
        </el-form-item>
      </el-form>

      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="solveOrder(builingForm.$id)"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-dialog
      title="分发工单"
      width="1200px"
      :visible.sync="showOrder"
      @closed="closeOrder()"
    >

      <el-transfer
        :titles="['人员列表', '选中人员']"
        :button-texts="['取消', '选中']"
        v-model="adminsForm.checkedAdmin"
        :data="adminsForm.admins">
        <el-button class="transfer-footer" slot="right-footer"  size="small" @click="orderOut()">分发</el-button>
      </el-transfer>
      <template #footer v-if="builingForm.$status !== 2">
        <el-button type="primary" @click="closeOrder()"
          >关闭</el-button
        >
      </template>
    </el-dialog>


  </div>
</template>

<script>
import API from "@/api";
import { table, addOrEdit, status } from "@/utils/mixins";
import Preview from '@/components/Preview.vue';

export default {
  mixins: [table, addOrEdit, status],
  components: {
    Preview
  },
  data: () => ({
    isLoading:true,
    showOrder:false,
    isCheckDetail:false,
    showAddOrEdit:false,//查看详情弹窗
    showAddOrSovle:false,//处理弹窗
    fullscreenLoading: false,//全局loading
    typeList: [],
    typeForm:[],
    tableData:[],
    searchForm:{
      page:1,
      per_page:10,
    },

    builingForm: {
      $id: "",
      user_real_name:"",//实名信息
      user_phone:'',//手机号
      user_addr_info:"",//用户地址
      create_time:'',
      report_addr:'',
      status:0,
      report_imgs:[],//报修图片
      report_content:"",
      admin_user_avatar_url:'',
      admin_user_name:'',
      repair_content:"",//管理员回复
      repair_imgs:[],//管理员回复图片
    },
    status: [
      { label: "待分发", value: 0 },
      { label: "处理中", value: 1 },
      { label: '已处理', value: 2 },
      { label: "不予受理", value: 3 },
    ],
    adminsForm:{
      $id:'',
      admins:[],
      checkedAdmin:[]
    },
    statusText: ["待分发","处理中",'已处理','不予处理'],

  }),

  created() {
    API.getAdminList({ page:1,per_page:30})
      .then(({data}) => {
        this.adminsForm.admins=data.items.map(item=>{
          return {label:item.nick_name,key:item.id}
        })
      }).catch();
    this.getList()
  },

  methods: {
    // 获取随手拍列表
    getList(){
      this.isLoading=true
      API.getComplaintPraiseList(this.searchForm)
      .then(({ data })=>{
        
        data.items.forEach(item=>{
          item.status=parseInt(item.status)
          item.repair_addr=item.subdistrict_name+item.report_addr
          item.user_phone=item.user_phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2')
        })
        this.tableData=data.items
        this.tableTotal=data.total
      })
      .catch()
      .finally(()=>{
        this.isLoading=false
      })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 处理工单详情
    solve(id){
      let _that=this
      let loadingInstance=this.$loading({ fullscreen: true })
      API.getComplaintPraiseInfo(id).then(({data})=>{
        _that.builingForm.$id=data.id
        _that.builingForm.user_real_name=data.user_real_name
        _that.builingForm.user_phone=data.user_phone
        _that.builingForm.user_addr_info=data.user_subdistrict_name+""+data.user_addr_info
        _that.builingForm.create_time=data.create_time
        _that.builingForm.report_addr=data.subdistrict_name+data.report_addr
        _that.builingForm.report_content=data.report_content
        _that.builingForm.status=parseInt(data.status)
        _that.builingForm.report_imgs=data.report_imgs
        _that.builingForm.admin_user_name=data.admin_user_name
        _that.builingForm.admin_user_avatar_url=data.admin_user_avatar_url
        _that.builingForm.repair_time=data.repair_time
        _that.builingForm.repair_imgs=data.repair_imgs
        _that.builingForm.repair_content=data.repair_content
      })
      .catch()
      .finally(()=>{
        this.showAddOrSovle=true
        loadingInstance.close()
      })
    },

    solveOrder(id){
      let data={
        status:this.builingForm.status,
        repair_content:this.builingForm.repair_content,
      }
      API.editComplaintPraise(id,data).then(()=>{
        this.$message.success("工单处理成功！");
        this.restForm()
        this.showAddOrSovle=false
        this.getList();
      })
    },

    // 查看工单详情详情
    openEditDialog(id){
      let _that=this
      let loadingInstance=this.$loading({ fullscreen: true })
      API.getComplaintPraiseInfo(id).then(({data})=>{
        _that.builingForm.$id=data.id
        _that.builingForm.user_real_name=data.user_real_name
        _that.builingForm.user_phone=data.user_phone
        _that.builingForm.create_time=data.create_time
        _that.builingForm.user_addr_info=data.user_subdistrict_name+""+data.user_addr_info
        _that.builingForm.report_addr=data.subdistrict_name+data.report_addr
        _that.builingForm.report_content=data.report_content
        _that.builingForm.status=parseInt(data.status)
        _that.builingForm.report_imgs=data.report_imgs
        _that.builingForm.admin_user_name=data.admin_user_name
        _that.builingForm.admin_user_avatar_url=data.admin_user_avatar_url
        _that.builingForm.repair_time=data.repair_time
        _that.builingForm.repair_imgs=data.repair_imgs
        _that.builingForm.repair_content=data.repair_content
      })
      .catch()
      .finally(()=>{
        this.showAddOrEdit=true
        loadingInstance.close()
      })
    },

    // 关闭弹窗
    closeDialog(){
      this.restForm()
      this.showAddOrEdit=false
    },

    // 删除
    deleteOrder(id){
      let _that=this
      this.$confirm(`是否删除该工单？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delComplaintPraise(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          this.getList()
          _that.showAddOrEdit=false;
        })
      })
      .catch(()=> {
      });
    },

    restForm(){
      let _that=this
      _that.builingForm.$id=""
      _that.builingForm.user_real_name=""
      _that.builingForm.user_phone=""
      _that.builingForm.user_addr_info=""
      _that.builingForm.create_time=""
      _that.builingForm.report_type_name=""
      _that.builingForm.report_addr=""
      _that.builingForm.status=0
      _that.builingForm.report_content=""
      _that.builingForm.report_imgs=[]
      _that.builingForm.repair_time=""
      _that.builingForm.admin_user_avatar_url=""
      _that.builingForm.admin_user_name=""
      _that.builingForm.repair_content=""
      _that.builingForm.repair_imgs=[]
    },

    // 分发工单
    giveOrder(id){
      this.adminsForm.$id=id
      this.showOrder=true
    },

    // 工单分发
    orderOut(){
      let report_id=this.adminsForm.$id
      let admin_user_id=this.adminsForm.checkedAdmin
      if(admin_user_id.length==0){
        this.$message.error('请选择分发的管理员');
      }else if(admin_user_id.length>1){
        this.$message.error('工单只能分发给一个人哦');
      }else{
          this.$confirm(`确定要分发该工单吗？`, "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
          })
            .then(() => API.giveComplaintPraise({report_id:report_id,admin_user_id:admin_user_id[0]}))
            .then(() => {

              this.$notify({
                title: "成功",
                message: `分发成功`,
                type: "success",
              });
              this.getList();
              this.closeOrder()
            })
            .catch(({ code }) => {
              if (code === 11100) {
                this.$message({
                  iconClass: " ",
                  message: "分发失败",
                });
              }
              this.getList();
              this.closeOrder()
            });
          }
    },

    // 关闭工单弹窗
    closeOrder(){
      this.adminsForm.checkedAdmin=[]
      this.showOrder=false
    }
  },
};
</script>

<style lang="scss" scoped>
.privew_img {
  width: 200px;
  height: 200px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.adminUserInfo{
  display:flex;
  align-items: center;
  .adminAvator{
    width:40px;
    height:40px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.4);
  }
  .blue{
    font-size:18px;
    margin-left: 12px;
    margin-right: 12px;
  }
}
::v-deep{
  .el-dialog{
    margin-top:2vh !important;
  }
}
</style>
